<template>
  <div class="contationAccount">
    <!-- 搜索表单区域 -->
    <div>
      <!-- 内联表单，用于输入查询条件 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 管理员姓名输入框 -->
        <el-form-item label="管理员姓名">
          <el-input v-model="formInline.tname" placeholder="请填写姓名"></el-input>
        </el-form-item>
        <!-- 联系方式输入框 -->
        <el-form-item label="联系方式">
          <el-input v-model="formInline.phone" placeholder="请填写联系方式"></el-input>
        </el-form-item>
        <!-- 表单操作按钮 -->
        <el-form-item>
          <!-- 查询按钮，点击时调用 loadAdminData 方法 -->
          <el-button type="primary" @click="loadAdminData">查询</el-button>
          <!-- 重置按钮，点击时调用 RestSubmit 方法 -->
          <el-button type="primary" @click="RestSubmit">重置</el-button>
          <!-- 添加按钮，点击时调用 insertAdmin 方法 -->
          <el-button type="primary" @click="insertAdmin">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据表格和分页区域 -->
    <div>
      <!-- 数据表格，展示管理员数据 -->
      <el-table :data="AdminData.slice((currentPage-1)*PageSize,currentPage*PageSize)" border style="width: 100%">
        <!-- ID 列 -->
        <el-table-column prop="id" label="ID" width="100"> </el-table-column>
        <!-- 真实姓名列 -->
        <el-table-column prop="tname" label="真实姓名" width="150"> </el-table-column>
        <!-- 联系方式列 -->
        <el-table-column prop="phone" label="联系方式" width="250"> </el-table-column>
        <!-- 用户名列 -->
        <el-table-column prop="username" label="用户名" width="150"> </el-table-column>
        <!-- 登录密码列 -->
        <el-table-column prop="password" label="登录密码" width="300"> </el-table-column>
        <!-- 最后登录时间列，处理空值情况 -->
        <el-table-column prop="logintime" label="最后登录时间" width="250" >
          <template slot-scope="scope">
            {{scope.row.logintime==null?'暂无数据':scope.row.logintime}}
          </template>
        </el-table-column>
        <!-- 用户级别列，根据级别显示不同文本 -->
        <el-table-column prop="lv" label="用户级别" width="130">
          <template slot-scope="scope">
            {{scope.row.lv==1?'BOSS':'管理员'}}
          </template>
        </el-table-column>
        <!-- 操作列，包含编辑和删除按钮 -->
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 编辑按钮，点击时调用 updateClick 方法 -->
            <el-button @click="updateClick(scope.row)" type="text" size="small">编辑</el-button>
            <!-- 删除按钮，当前用户是BOSS且目标不是BOSS时才显示删除按钮 -->
            <el-button 
              v-if="scope.row.lv != 1" 
              @click="deleteClick(scope.row.id)" 
              type="text" 
              size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination background
        :page-sizes="[12, 20, 30, 40]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="AdminData.length"
        @current-change="CurrentChange"
        @size-change="SizeChange"
      >
      </el-pagination>
      <!-- 添加用户信息弹出层 -->
      <el-dialog
        title="添加管理员信息"
        :visible.sync="Visible"
        width="45%"
        top="15%"
        :close-on-click-modal="false"
      >
        <div>
          <!-- 添加用户信息表单 -->
          <el-form ref="Admin" :model="Admin" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="9" :offset="1">
                <!-- 用户名输入框 -->
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="Admin.username" placeholder="请填写用户名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <!-- 密码输入框 -->
                <el-form-item label="密码" prop="password">
                  <el-input v-model.number="Admin.password" placeholder="请填写登录密码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9" :offset="1">
                <!-- 真实姓名输入框 -->
                <el-form-item label="真实姓名" prop="tname">
                  <el-input v-model="Admin.tname" placeholder="请填写管理员姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <!-- 联系方式输入框 -->
                <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="Admin.phone" placeholder="请填写联系方式"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            </el-row>
            <el-row class="btn">
              <el-col :span="4" :offset="10">
                <!-- 确认添加按钮，点击时调用 submitForm 方法，类型为 1 表示添加操作 -->
                <el-button type="primary" @click="submitForm('Admin',1)">确认添加</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-dialog>
      <!-- 修改用户信息弹出层 -->
      <el-dialog
        title="修改管理员信息"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="closeDialog"
        :close-on-click-modal="false"
      >
        <div>
          <!-- 修改用户信息表单 -->
          <el-form ref="Admin" :model="Admin" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="9" :offset="1">
                <!-- 用户名输入框 -->
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="Admin.username" placeholder="请填写用户名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <!-- 密码输入框 -->
                <el-form-item label="密码" prop="password">
                  <el-input v-model.number="Admin.password" placeholder="请填写登录密码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9" :offset="1">
                <!-- 真实姓名输入框 -->
                <el-form-item label="真实姓名" prop="tname">
                  <el-input v-model="Admin.tname" placeholder="请填写管理员姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <!-- 联系方式输入框 -->
                <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="Admin.phone" placeholder="请填写联系方式"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1">
                <!-- 最后登录时间输入框，设置为只读 -->
                <el-form-item label="最后登录时间" prop="logintime">
                  <el-date-picker
                    v-model="Admin.logintime"
                    type="datetime"
                    :disabled="true"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            </el-row>
            <el-row class="btn">
              <el-col :span="4" :offset="10">
                <!-- 确认修改按钮，点击时调用 submitForm 方法，类型为 2 表示修改操作 -->
                <el-button type="primary" @click="submitForm('Admin',2)">确认修改</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-dialog>
    </div>
    <!-- 添加页脚组件 -->
    <Footer />
  </div>
</template>

<script>
  import Footer from './footer.vue'
  export default {
    components: {
      Footer
    },
    data() {
      return {
        // 存储管理员数据列表
        AdminData: [],
        // 存储当前操作的管理员对象
        Admin: {},
        // 搜索表单的数据模型
        formInline: {
          tname: null,
          status: null,
          phone: null
        },
        // 修改用户信息弹出层的显示状态
        dialogVisible: false,
        // 添加用户信息弹出层的显示状态
        Visible: false,
        // 当前页码
        currentPage: 1,
        // 每页显示的数据条数
        PageSize: 12,
        // 表单验证规则
        rules: {
          tname: [
            { required: true, message: '管理员姓名不能为空', trigger: 'blur' },
            { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '联系方式不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      // 页面加载时调用，获取管理员数据
      this.loadAdminData();
    },
    methods: {
      // 请求管理员信息的方法
      loadAdminData() {
        // 使用 axios 发送 POST 请求获取管理员列表数据
        this.$axios.post('/Badmin/selectAdminList', {
          tname: this.formInline.tname,
          status: this.formInline.status,
          phone: this.formInline.phone
        }).then(res => {
          // 将获取到的数据赋值给 AdminData
          this.AdminData = res.data;
        })
      },
      // 重置表单的方法
      RestSubmit() {
        // 重置表单数据
        this.formInline = {
          tname: null,
          status: null,
          phone: null
        };
        // 重新加载管理员数据
        this.loadAdminData();
      },
      // 添加/修改用户信息的方法
      submitForm(Admin, type) {
        // 对表单进行验证
        this.$refs[Admin].validate((valid) => {
          if (valid) {
            if (type == 1) {
              // 添加管理员身份信息的逻辑
              this.$axios.post('/Badmin/InsertAdminByAdmin', {
                tname: this.Admin.tname,
                username: this.Admin.username,
                password: this.Admin.password,
                phone: this.Admin.phone
              }).then(res => {
                if (res.data == 1) {
                  // 提示添加成功信息
                  this.$message({
                    message: '添加成功！',
                    type: 'success'
                  });
                  // 重新加载管理员数据
                  this.loadAdminData();
                }
              });
            } else if (type == 2) {
              // 修改管理员身份信息的逻辑
              this.$axios.post('/Badmin/updateAdminById', {
                id: this.Admin.id,
                tname: this.Admin.tname,
                username: this.Admin.username,
                password: this.Admin.password,
                phone: this.Admin.phone
              }).then(res => {
                if (res.data == 1) {
                  // 提示修改成功信息
                  this.$message({
                    message: '修改成功！',
                    type: 'success'
                  });
                  // 重新加载管理员数据
                  this.loadAdminData();
                }
              });
            }

          } else {
            return false;
          }
        });
      },
      // 修改数据的方法，将选中的行数据赋值给 Admin 并显示修改弹出层
      updateClick(res) {
        this.Admin = res;
        this.dialogVisible = true;
      },
      // 关闭修改弹出层的方法，重置 Admin 对象
      closeDialog() {
        this.Admin = {};
        this.dialogVisible = false;
      },
      // 删除数据的方法
      deleteClick(id) {
        // 弹出确认删除的提示框
        this.$confirm('是否删除该账号？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          // 发送删除请求
          this.$axios.get('/Badmin/deleteAdminById', {
            params: { id: id }
          }).then(res => {
            if (res.data == 1) {
              // 重新加载管理员数据
              this.loadAdminData()
              // 提示删除成功信息
              this.$message({
                type: 'success',
                message: '该账号已删除'
              });
            }
          })
        }).catch(() => {
          // 提示已取消删除信息
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 打开添加管理员弹出层的方法
      insertAdmin() {
        this.Visible = true;
      },
      // 分页时当前页码变化的回调方法
      CurrentChange(val) {
        this.currentPage = val;
      },
      // 分页时每页显示条数变化的回调方法
      SizeChange(val) {
        this.PageSize = val;
      }
    }
  }
</script>

<style>
  .el-table{
    text-align-last: center;
    height: 733px;
    overflow: auto;
  }
  .contationAccount{
    padding: 20px;
    margin: 10px;
    margin-top: 0;
    min-height: 855px;
    background-color: #FFFFFF;
  }
  .el-pagination{
    margin-top: 20px;
    margin-right: 30px;
    float: right;
  }
 .btn{
    margin-top: 30px;
  }

  /* 移动端适配 */
  @media screen and (max-width: 768px) {
   .contationAccount {
      padding: 10px;
      margin: 5px;
      width: 100%;
    }
   .el-pagination {
      margin: 10px;
      float: none;
      text-align: center;
    }
  }
</style>